<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-03 15:15:42
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-07-30 09:35:23
 * @Description  : 
-->
<template>
	<view class="homeClass">
		<view class="commonHeight">
			<index v-if="tabIndex == 0" ref="mescrollItem0" class="commonHeightComp" />
			<menu11 v-if="tabIndex == 1" ref="mescrollItem1" class="commonHeightComp" />
			<order v-if="tabIndex == 2" ref="mescrollItem2" class="commonHeightComp" />
			<mine v-if="tabIndex == 3" ref="mescrollItem3" class="commonHeightComp" />
		</view>
		<view class="custom_tabbar">
			<me-tabs style="width: 100%; height: 100%" v-model="tabIndex"></me-tabs>
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick, onUnmounted, computed, onMounted,watch } from 'vue'
	import { onShow, onLoad, onReady, onPageScroll } from '@dcloudio/uni-app'
	
	import meTabs from './me-tabs.vue'
	import index from '../index/index.vue'
	import order from '../order/order.vue'
	import mine from '../mine/mine.vue'
	import menu11 from '../menu/menu.vue'
	import { useMainStore } from '@/store/store'
	const baseStore = useMainStore()
	// 响应式数据
	const scrollPositions = ref({})
	const tabIndex = ref(0)
	// refs
	const mescrollItem0 = ref(null)
	const mescrollItem1 = ref(null)
	const mescrollItem2 = ref(null)
	const mescrollItem3 = ref(null)
	watch(() => tabIndex.value, (newVal, oldVal) => {
		showMethod()
	})
	// 方法
	const restoreScroll = page => {
		const scrollTop = scrollPositions.value[page] || 0
		nextTick(() => {
			uni.pageScrollTo({
				scrollTop: scrollTop,
				duration: 0,
			})
		})
	}

	const resetCurrentScroll = () => {
		// 重置当前页面的滚动位置
		scrollPositions.value[tabIndex.value] = 0
		restoreScroll(tabIndex.value)
	}

	const getCustomTabbarHeight = () => {
		nextTick(() => {
			uni.createSelectorQuery()
				.select('.custom_tabbar') // 选择器
				.boundingClientRect(rect => {
					if (rect) {
						console.log('计算后的 tabbar 高度:', rect.height)
						// 你可以将高度存储到 data 或用于其他逻辑
						baseStore.setCustomTabbarHeight(rect.height)
					}
				})
				.exec()
		})
	}
	const showMethod = () => {
		nextTick(() => {
			if (tabIndex.value == 0) {
				mescrollItem0.value.indexShowMethod()
			} else if (tabIndex.value == 1) {
				mescrollItem1.value.menuShowMethod()
			} else if (tabIndex.value == 2) {
				// mescrollItem2.value.orderShowMethod()
			} else if (tabIndex.value == 3) {
				// mescrollItem3.value.mineShowMethod()
			}
		})
	}
	// 生命周期钩子
	onShow(() => {
		showMethod()
	})

	onLoad(options => {
		if (options.tabIndex) {
			tabIndex.value = parseInt(options.tabIndex)
		}
		getCustomTabbarHeight()
	})

	onReady(() => {
		uni.pageScrollTo({
			scrollTop: 0, // 设置滚动位置为顶部
			duration: 0, // 0 表示瞬间到达顶部
		})
	})

	onPageScroll(e => {
		// 实时记录滚动位置
		scrollPositions.value[tabIndex.value] = e.scrollTop
	})
</script>

<style lang="less" scoped>
	.top-warp {
		z-index: 9990;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120upx;
		background-color: white;
	}

	.top-warp .tip {
		font-size: 28upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
	}

	.homeClass {
		height: 100vh;
        display: flex;
        flex-direction: column;
		.commonHeight {
			// height: calc(100% - 50px + (env(safe-area-inset-bottom) / 2));
            flex: 1;
            overflow: hidden;
			.commonHeightComp {
				height: 100%;
			}
		}
	}

	.custom_tabbar {
		display: flex;
		align-items: center;
		// position: fixed;
		justify-content: space-around;
		width: 100%;
		// bottom: 0;
		z-index: 9990;
		background-color: #fff;
		box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
		padding: 0;
		height: calc(50px + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);

		.custom_tabbar_item {
			width: 33.33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: #999;

			image {
				width: 25px;
				height: 25px;
			}
		}

		.custom_tabbar_item_active {
			color: #2979ff;
		}
	}
</style>
